<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业-饼图，横向条形图</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height:500px;border:2px solid purple"></div>
<script type="text/javascript">
    var myEChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {text: '用户分层统计', left: '40%',
            subtext: '数据来自课件'},

        legend: {data: ['用户数量'],left:'right'},

        tooltip: {trigger: 'axis',
            axisPointer: {
                type: 'shadow'}},

        dataRange: {                                 //值域
            x: 'right', y: '300',
            backgroundColor: 'rgba(0,0,0,0)',
            color: ['#4917ff','#ff350e'],
        },

        xAxis: {type: 'value',
            boundaryGap: [0, 0.01]},
        yAxis: {type: 'category'},
        dataset: {
            source:[
                ['活跃用户', 0],
                ['新用户', 91],
                ['连续活跃用户', 524],
                ['回流用户', 6546],
                ['流失用户', 183472]]},

        series: [
            {   name: '用户数量',        //和上面的legend是对应的
                type: 'bar'},

            {   type: 'pie', radius: '20%', center: ['88%', '60%'], roseType: 'angle'}]
    }

            myEChart.setOption(option);


</script>
</body>
</html>